<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <TodoHeader @delTaskHanderl="addTask" :list="list"></TodoHeader>
    <TodoMain :list="showTask" @delTaskHanderl="delTask"></TodoMain>
    <TodoFooter :list="showTask" @changeTaskHanderl="changeTask"
    @clearTaskHanderl="clearTask"></TodoFooter>
  </section>
</template>

<script>
// 1.0 样式引入

import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";

export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {
      list: JSON.parse(localStorage.getItem('list') || '[]'),
      isAll:'all'
    };
  },
  methods:{
      /* 删除 */
      delTask(id){
        let index= this.list.findIndex(item=>item.id=id)
        this.list.splice(index,1)
      },
      /* 添加 */
      addTask(taskName){
          let id = this.list.length>0 ? this.list[this.list.length-1].id+1 : 100
          this.list.push({
              id,
              name:taskName,
              isDone:false

          })
      },
     changeTask(isAll) {
         this.isAll=isAll
     },
     clearTask(){
         this.list=this.list.filter(item=>!item.isDone)
     }
  },
  computed:{
      showTask(){
          if(this.isAll=='no'){
              return this.list.filter(item=>!item.isDone)
          }else if(this.isAll=='yes'){
              return this.list.filter(item=>item.isDone)
          }return this.list
      }
  },
  watch:{
      list:{
          deep:true,
          handler(){
              localStorage.setItem('list',JSON.stringify(this.list))
          }
      }
  }
};
</script>
